<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="https://particles.js.org/tsParticles-64.png" />
    <meta name="description"
          content="tsParticles - Easily create highly customizable particles animations and use them as animated backgrounds for your website. Ready to use components available for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno." />
    <meta name="author" content="Matteo Bruni" />
    <meta name="keywords"
          content="HTML, CSS, JavaScript, Particles, Particles.js, Animations, React, Vue, Angular, Vue.js, Svelte" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:creator" content="@HollowMatt_ITA" />
    <meta name="twitter:image:src" content="https://particles.js.org/images/demo2.png" />

    <meta property="og:title" content="tsParticles - JavaScript Particles animations for your website" />
    <meta property="og:site_name" content="tsParticles" />
    <meta property="og:url" content="https://particles.js.org/" />
    <meta property="og:description"
          content="Easily create highly customizable particles animations and use them as animated backgrounds for your website. Ready to use components available for React, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno." />
    <meta property="og:image" content="https://particles.js.org/images/demo2.png" />

    <title>tsParticles | JavaScript Particles animations for your website</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
          integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.13.0/css/all.min.css"
          integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />

    <link href="css/main.min.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="tsparticles"></div>
<div id="floating-container">
    <select id="preset">
        <option value="absorbers">Absorbers</option>
        <option value="amongUs">Among Us</option>
        <option value="background">Background Mask</option>
        <option value="big">Big Particles</option>
        <option value="blackHole">Black Hole</option>
        <option value="bubble">Bubble</option>
        <option value="chars">Chars</option>
        <option value="clickPause">Click Pause</option>
        <option value="collisionsAbsorb">Collisions Absorb</option>
        <option value="collisionsBounce">Collisions Bounce</option>
        <option value="collisionsDestroy">Collisions Destroy</option>
        <option value="connect">Connect</option>
        <option value="customPreset">Custom Preset</option>
        <option value="customShape">Custom Shape</option>
        <option value="dataImages">Data URI Images</option>
        <option value="basic">Default</option>
        <option value="delay">Delay</option>
        <option value="destroy">Destroy</option>
        <option value="disappearing">Disappearing</option>
        <option value="divEvents">Div Events</option>
        <option value="emitter">Emitter</option>
        <option value="emitterAngled">Emitter Angled</option>
        <option value="emitterAbsorber">Emitter and Absorber</option>
        <option value="emitterImages">Emitter Images</option>
        <option value="emitterPaths">Emitter Paths</option>
        <option value="emitterShapes">Emitter Shapes</option>
        <option value="fireworks">Fireworks</option>
        <option value="forward">Forward</option>
        <option value="grabRandomColor">Grab Random Color</option>
        <option value="gradients">Gradients</option>
        <option value="gravity">Gravity</option>
        <option value="growing">Growing</option>
        <option value="fontawesome">Font Awesome</option>
        <option value="hexagonPath">Hexagon Path</option>
        <option value="hollowknight">Hollow Knight</option>
        <option value="hyperspace">Hyperspace</option>
        <option value="imageMask">Image Mask</option>
        <option value="images">Images</option>
        <option value="imagesDirections">Images with Custom Directions</option>
        <option value="infection">Infection</option>
        <option value="life">Life</option>
        <option value="lightHover">Light Hover</option>
        <option value="linkTriangles">Link Triangles</option>
        <option value="localPolygonMask">Local Polygon Mask</option>
        <option value="manual">Manual</option>
        <option value="motionDisable">Motion Disable</option>
        <option value="motionReduce">Motion Reduce</option>
        <option value="mouseAttract">Mouse Attract</option>
        <option value="mouseBounce">Mouse Bounce</option>
        <option value="mouseFollow">Mouse Follow</option>
        <option value="mouseTrail">Mouse Trail</option>
        <option value="moveAngle">Move Angle</option>
        <option value="moveDistance">Move Distance</option>
        <option value="moveInside">Move Inside</option>
        <option value="moveOutside">Move Outside</option>
        <option value="multipleClickEmitters">Multiple Click Emitters</option>
        <option value="multiplePolygonMasks">Multiple Polygon Masks</option>
        <option value="nasa">NASA</option>
        <option value="noconfig">No Config</option>
        <option value="noisePlanes">Noise Planes</option>
        <option value="nyancat">Nyan Cat</option>
        <option value="nyancat2">Nyan Cat 2</option>
        <option value="orbit">Orbit</option>
        <option value="parallax">Parallax</option>
        <option value="pathPolygonMask">Path Polygon Mask</option>
        <option value="planes">Planes</option>
        <option value="plasma">Plasma</option>
        <option value="polygonMask">Polygon Mask</option>
        <option value="polygons">Polygon Shape</option>
        <option value="random">Random Colors</option>
        <option value="reactBubbles">React Bubbles</option>
        <option value="reactDefaults">React Defaults</option>
        <option value="reactMultipleImages">React Multiple Images</option>
        <option value="reactNightSky">React Night Sky</option>
        <option value="reactPolygonMask">React Polygon Mask</option>
        <option value="reactSimple">React Simple</option>
        <option value="reactSnow">React Snow</option>
        <option value="reduceDuplicates">Reduce Duplicates</option>
        <option value="repulse">Repulse</option>
        <option value="repulseBack">Repulse Back</option>
        <option value="repulseCirc">Repulse Circ</option>
        <option value="repulseCubic">Repulse Cubic</option>
        <option value="repulseExpo">Repulse Expo</option>
        <option value="repulseQuart">Repulse Quart</option>
        <option value="repulseQuint">Repulse Quint</option>
        <option value="repulseSine">Repulse Sine</option>
        <option value="responsive">Responsive</option>
        <option value="ring">Ring</option>
        <option value="seaAnemone">Sea Anemone</option>
        <option value="shadow">Shadow</option>
        <option value="shapeBubble">Shape Bubble</option>
        <option value="shapeHeart">Shape Heart</option>
        <option value="shapeMultilineText">Shape Multiline Text</option>
        <option value="shapeOptions">Shape Options</option>
        <option value="shapeRoundedRect">Shape Rounded Rect</option>
        <option value="shapeSpiral">Shape Spiral</option>
        <option value="slow">Slow on Hover</option>
        <option value="snow">Snow</option>
        <option value="speedDecay">Speed Decay</option>
        <option value="spin">Spin</option>
        <option value="star">Star</option>
        <option value="strokeAnimation">Stroke Animation</option>
        <option value="style">Style</option>
        <option value="svgReplace">Svg Replace</option>
        <option value="test">Test</option>
        <option value="textMask">Text Mask</option>
        <option value="textMaskMultiline">Text Mask Multiline</option>
        <option value="trail">Trails</option>
        <option value="twinkle">Twinkle</option>
        <option value="vibrate">Vibrate</option>
        <option value="virus">Virus</option>
        <option value="warp">Warp</option>
        <option value="wobble">Wobble</option>
        <option value="zIndex">Z Index</option>
    </select>
</div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
        integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
        integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js"
        integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s"
        crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/pathseg@1.2.0/pathseg.min.js"></script>

<script src="js/tsparticles.bundle.min.js"></script>
<script src="js/tsparticles.configs.min.js"></script>
<script src="js/tsparticles.interaction.light.min.js"></script>
<script src="js/tsparticles.interaction.particles.repulse.min.js"></script>
<script src="js/tsparticles.path.curves.min.js"></script>
<script src="js/tsparticles.path.polygon.min.js"></script>
<script src="js/tsparticles.path.perlin.noise.min.js"></script>
<script src="js/tsparticles.path.simplex.noise.min.js"></script>
<script src="js/tsparticles.plugin.infection.min.js"></script>
<script src="js/tsparticles.updater.gradient.min.js"></script>
<script src="js/tsparticles.updater.orbit.min.js"></script>

<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", () => {
        (async () => {
            await loadInfectionPlugin(tsParticles);
            await loadLightInteraction(tsParticles);
            await loadParticlesRepulseInteraction(tsParticles);
            await loadGradientUpdater(tsParticles);
            await loadOrbitUpdater(tsParticles);
            await loadCurvesPath(tsParticles);
            await loadPolygonPath(tsParticles);
            await loadPerlinNoisePath(tsParticles);
            await loadSimplexNoisePath(tsParticles);
        })();

        const loadPreset = async (preset) => {
            await tsParticles.load({
                id: "tsparticles",
                options: tsParticles.configs[preset]
            });
        };

        let preset = sessionStorage.preset || "basic";

        loadPreset(preset);

        const cmbPreset = document.getElementById("preset");

        cmbPreset.value = preset;

        cmbPreset.addEventListener("change", () => {
            sessionStorage.preset = cmbPreset.value;

            loadPreset(cmbPreset.value);
        });
    });
</script>
</body>
</html>
